<template>
  <div class="chat-sidebar w-72 bg-white border-r h-full flex flex-col">
    <el-tabs v-model="activeTab" class="flex-1 flex flex-col" tab-position="top">
      <el-tab-pane label="会话列表" name="session">
        <div class="flex-1 overflow-y-auto">
          <ChatFriendItem
            v-for="session in sessions"
            :key="session.sessionId"
            :session="session"
            :active="session.sessionId === activeSessionId"
            @click="handleSelect(session.sessionId)"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="好友" name="friend">
        <div class="flex-1 overflow-y-auto">
          <ChatFriendList />
        </div>
      </el-tab-pane>
      <el-tab-pane label="通知" name="notice">
        <div class="flex-1 overflow-y-auto">
          <ChatNoticeList />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useChatStore } from '@/stores/chatStore'
import ChatFriendItem from './ChatFriendItem.vue'
import ChatNoticeList from './ChatNoticeList.vue'
import ChatFriendList from './ChatFriendList.vue'
const chatStore = useChatStore()
const sessions = computed(() => chatStore.sessionList)
const activeSessionId = computed(() => chatStore.activeSessionId)
const activeTab = ref('session')

function handleSelect(sessionId) {
  chatStore.setActiveSession(sessionId)
}
</script>

<style scoped>
.chat-sidebar {
  background: #fff;
  min-width: 18rem;
}
</style> 